<template>
    <div>
        <el-header style="text-align: right; font-size: 12px">
            <el-button type="primary" icon="el-icon-circle-plus-outline" @click="DialogVisible" circle>

            </el-button>

        </el-header>
        <el-main>
            <el-dialog
                    title="权限"
                    :visible.sync="centerDialogVisible"
                    width="30%"
                    center>

                <el-form inline :model="rolesForm" class="demo-form-inline">
                    <el-form-item label="权限字段">
                        <el-input v-model="rolesForm.name" placeholder="权限字段"></el-input>
                    </el-form-item>
                    <el-form-item label="权限名称">
                        <el-input v-model="rolesForm.nameZh" placeholder="权限名称"></el-input>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="centerDialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="addOrEdit">确 定</el-button>
                </span>
            </el-dialog>
            <el-table :data="roleList">

                <el-table-column prop="name" label="权限字段" width="120">
                </el-table-column>
                <el-table-column prop="nameZh" label="权限名称" width="140">
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button
                                size="mini"
                                @click="handleEdit(scope.row)">编辑</el-button>
                        <el-button
                                size="mini"
                                type="danger"
                                @click="handleDel(scope.row)">删除</el-button>
                    </template>
                </el-table-column>

            </el-table>
        </el-main>

    </div>
</template>

<script>
    import {Message} from 'element-ui'
    export default {
        name: "Role",
        data(){
            return{
                roleList:[],
                centerDialogVisible:false,
                rolesForm:{},
                dilogTitle:'新增权限',
            }
        },
        methods:{
            getRoles(){
                this.getRequest("api/tg/role/roleTree").then(res=>{
                    this.roleList = res.data.data
                })
            },
            addOrEdit(){

                this.postRequestJson("api/tg/role/addOrEditRoles",this.rolesForm).then(p=>{
                    if(p.data.code==='0'){
                        this.getRoles()
                        Message.success(p.data.message)
                    }else{
                        Message.warning(p.data.message)
                    }
                })
            },
            handleEdit(data){
                this.centerDialogVisible = true
                this.rolesForm = data;
            },

            handleDel(data){
                console.log(data)
                this.$confirm('确认删除？').then(f => {
                    this.postRequest("api/tg/role/delRoles/"+data.id,null).then(item=>{
                        if(item.data.code==='0'){
                            this.getRoles()
                            Message.success(item.data.message)
                        }else{
                            Message.warning(item.data.message)
                        }
                    })
                })
            },
            DialogVisible(){
                this.centerDialogVisible = true
                this.rolesForm = {};
            }
        },
        created(){
            this.getRoles()
        }

    }
</script>

<style scoped>

</style>
